<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font: 13px Helvetica, Arial;
    }

    form {
      background: #000;
      padding: 3px;
      position: fixed;
      bottom: 0;
      width: 100%;
    }

    form input {
      border: 0;
      padding: 10px;
      width: 90%;
      margin-right: .5%;
    }

    form button {
      width: 9%;
      background: rgb(130, 224, 255);
      border: none;
      padding: 10px;
    }

    #messages {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }

    #messages li {
      padding: 5px 10px;
    }

    #messages li:nth-child(odd) {
      background: #eee;
    }
  </style>

</head>

<body>
  <!-- <h1>聊天室</h1>
    <p>
        先使用由express启动的 http服务, 加载首页， 
        <br>
        再切换由socket.io 封装 的websocket 协议 实时聊天
        101 切换协议
    </p> -->
  <ul id="messages"></ul>
  <form id="form" action="" name="msgForm">
    <input id="input" autocomplete="off" /><button>Send</button>
  </form>



  <script src="/socket.io/socket.io.js"></script>
  <script>
    var socket = io();
    var messages = document.getElementById('messages');
    var form = document.getElementById('form');
    var input = document.getElementById('input');

    form.addEventListener('submit', function (e) {
      e.preventDefault();
      // 高数服务器，有个消息想转发
      // 先发给我服务器
      // 发给所有人
      if (input.value) {
        // 发送一个消息 message 消息名字，内容
        socket.emit('message', input.value);
      }
    })

    socket.on('message', function (msg) {
      var item = document.createElement('li');
      item.textContent = msg;
      messages.appendChild(item);
    })
  </script>

</body>

</html>
